<html lang="ch">
<head>
    <meta charset="UTF-8">
    <script src="../plugins/echarts/echarts.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1ac1b6a8a0a4ccfd85ea43fe7f841e55"></script>
    <style>
        #app{
        }
        #container {
            height: 1000px;
        }
    </style>
</head>
<body>
<main id="main">
    <div id = "app" align="center">
        <table style="text-align: center">
            <tr>
                <td>{{msg}}</td>
                <td><el-button type="primary" @click="depth('grade1',iconSrc1)">0~5</el-button></td>
                <td><el-button type="primary" @click="depth('grade2',iconSrc2)">5~10</el-button></td>
                <td><el-button type="primary" @click="depth('grade3',iconSrc3)">10~20</el-button></td>
                <td><el-button type="primary" @click="depth('grade4',iconSrc4)">20~50</el-button></td>
                <td><el-button type="primary" @click="depth('grade5',iconSrc5)">50~100</el-button></td>
                <td><el-button type="primary" @click="depth('grade6',iconSrc6)">100+</el-button></td>
            </tr>
            <tr>
                <td>{{msg1}}</td>
                <td><el-button type="primary" @click="strength('grade1',iconSrc1)">>3</el-button></td>
                <td><el-button type="primary" @click="strength('grade2',iconSrc2)">3~4</el-button></td>
                <td><el-button type="primary" @click="strength('grade3',iconSrc3)">4~5</el-button></td>
                <td><el-button type="primary" @click="strength('grade4',iconSrc4)">5~6</el-button></td>
                <td><el-button type="primary" @click="strength('grade5',iconSrc5)">6~7</el-button></td>
                <td><el-button type="primary" @click="strength('grade6',iconSrc6)">7<</el-button></td>
            </tr>
            <tr>
                <td>显示地震高发地带</td>
                <td><el-button type="primary" @click="showZone()">显示</el-button></td>
            </tr>
        </table>
    </div>
    <div id="container"></div>
</main>

</body>
<script>
    var map = new AMap.Map('container',{
        center: [104.07, 30.67],//中心点坐标
    });
    const vue = new Vue({
        el: '#app',
        data: {
            all:[],//所有点
            //按等级分的点集
            grade1:[],//[0,5)/3
            grade2:[],//[5,10)/4
            grade3:[],//[10,20)/5
            grade4:[],//[20,50)/6
            grade5:[],//[50,100)/7
            grade6:[],//[100,~)/8
            markerList:[],
            strength1:[],
            strength2:[],
            strength3:[],
            strength4:[],
            strength5:[],
            strength6:[],
            dataList:[],
            //点图标
            iconSrc1:"../assets/img/map1.png",
            iconSrc2:"../assets/img/map2.png",
            iconSrc3:"../assets/img/map3.png",
            iconSrc4:"../assets/img/map4.png",
            iconSrc5:"../assets/img/map5.png",
            iconSrc6:"../assets/img/map6.png",
            msg:"震源深度",
            msg1:"震源等级"
        },

        created() {
            // axios.get("/point/getAll").then((res)=>{
            //     this.grade1 = res.data.grade1;
            //     this.grade2 = res.data.grade2;
            //     this.grade3 = res.data.grade3;
            //     this.grade4 = res.data.grade4;
            //     this.grade5 = res.data.grade5;
            //     this.grade6 = res.data.grade6;
            // });
            // axios.get("/point/getAllByStrength").then((res)=>{
            //     this.strength1 = res.data.grade1;
            //     this.strength2 = res.data.grade2;
            //     this.strength3 = res.data.grade3;
            //     this.strength4 = res.data.grade4;
            //     this.strength5 = res.data.grade5;
            //     this.strength6 = res.data.grade6;
            // });
        },
        methods: {
            depth(grade,src){
                //清楚当前页面上所有的点
                map.remove(markerList);
                axios.get("/point/getByDepth/"+grade).then((res)=>{
                    for(var i=0;i<res.data.length;i++) {
                        marker = new AMap.Marker({
                            map:map,
                            // offset: new AMap.Pixel(-13, -30),
                            position: res.data[i],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            icon:src  // 添加 Icon 图标 URL
                        });
                        map.add(marker);
                        markerList.push(marker);
                    }
                });
            },
            strength(grade,src){
                //清楚当前页面上所有的点
                map.remove(markerList);
                axios.get("/point/getByStrength/"+grade).then((res)=>{
                    for(var i=0;i<res.data.length;i++) {
                        marker = new AMap.Marker({
                            map:map,
                            // offset: new AMap.Pixel(-13, -30),
                            position: res.data[i],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                            icon:src  // 添加 Icon 图标 URL
                        });
                        map.add(marker);
                        markerList.push(marker);
                    }
                });
            },
            showZone(){
                map.remove(markerList);
                axios.get("/arithmetic/getDbScan").then((res)=>{
                    for (var i = 0; i <res.data.length ; i++) {
                        var src = res.data[i].src;
                        var data = res.data[i].data;
                        for (var j = 0; j <data.length ; j++) {
                            marker = new AMap.Marker({
                                map:map,
                                // offset: new AMap.Pixel(-13, -30),
                                position: data[j],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                icon:src  // 添加 Icon 图标 URL
                            });
                            map.add(marker);
                            markerList.push(marker);
                        }
                    }
                })
            }
        }
    });
    var markerList = [];
</script>
</html>